<template>
  <div>
    <div class="search">
      <div class="search-input" @click="bindSearchTap">
        <input placeholder="输入您要搜索的理发师">
      </div>
    </div>

    <ul class="container log-list">
      <li v-for="(hairdresser, index) in hairdressers" :key="index">
        <card
              :avatar="hairdresser.avatar"
              :name="hairdresser.name"
              :seniority="hairdresser.seniority"
              :mono="hairdresser.mono"
              :items="hairdresser.items"/>
      </li>
    </ul>
  </div>
</template>

<script>
import { formatTime } from '@/utils/index'
import card from '@/components/card'

export default {
  components: {
    card
  },

  data () {
    return {
      hairdressers: [
        {
          id: 1,
          avatar: 'https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg',
          name: '托尼韩',
          seniority: 2,
          mono: '我从业10年，有许多擅长的设计手 法，在我手下设计过李大大，张西 西西等的发型设计，参加过国...',
          items: []
        },
        {
          id: 1,
          avatar: 'https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg',
          name: '托尼',
          seniority: 2,
          mono: '我从业10年，有许多擅长的设计手 法，在我手下设计过李大大，张西 西西等的发型设计，参加过国...',
          items: []
        },
        {
          id: 1,
          avatar: 'https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg',
          name: '托尼',
          seniority: 2,
          mono: '我从业10年，有许多擅长的设计手 法，在我手下设计过李大大，张西 西西等的发型设计，参加过国...',
          items: []
        }
      ]
    }
  },

  created () {

  }
}
</script>

<style scoped>
  .search {
    height: 0.9rem;
    width: 100%;
  }

  .search-input {
    height: 0.58rem;
    background: rgba(248,248,248,1);
    border-radius: 0.5rem;
    margin: 0 0.2rem;
  }

  .search-input input{
    /*width: 2.85rem;*/
    height: 0.58rem;
    font-size: 0.28rem;
    /*font-family: PingFang-SC-Regular;*/
    color: rgba(133,134,151,1);
    line-height: 0.58rem;
    margin-left: 0.5rem;
  }
</style>
